<template>
<div>
  <table
    style="text-align: left;"
    cellspacing="0"
    cellpadding="0"
  >
    <tbody>
      <tr v-for="(item, index) in this.value" :key="index">
        <td style="width: 5%; height: 38px">
            <el-checkbox
              size="mini"
              v-model="item.enable"
            ></el-checkbox>
        </td>
        <td style="width: 30%">
            <el-input
              style="width: 90%"
              v-model="item.name"
              size="mini"
              placeholder="name"
              :disabled="!item.enable"
            ></el-input>
        </td>
        <td style="width: 40%">
            <el-input
              style="width: 90%"
              v-model="item.value"
              size="mini"
              placeholder="value"
              :disabled="!item.enable"
            ></el-input>
        </td>
        <td style="width: 10%">
            <el-button
              size="mini"
              icon="el-icon-minus"
              circle
              @click="removeLine(index)"
            ></el-button>
        </td>
      </tr>
    </tbody>
  </table>
    <el-button
      size="mini"
      icon="el-icon-plus"
      round
      @click="addLine"
    >{{this.addButtonName}}</el-button>
  </div>
</template>
<script>
export default {
  props: {
    value: Array,
    addButtonName: {
      type: String,
      default: 'Add'
    },
  },
  data() {
    return {
      disableInput: false
    }
  },
  methods: {
    addLine() {
      this.value.push({
        enable: true,
        name: null,
        value: null
      });
    },
    removeLine(index) {
      this.value.splice(index, 1);
    },
  }
};
</script>
<style>
</style>